<template>
	<div class="card-box duty-box">
		<card-title title="生态公益岗">
			<div class="red">
				<img src="../../assets/images/home/red-green.png" class="image" alt="" />
			</div>
		</card-title>
		<div class="ratio-box">
			<div class="pie" ref="dutyBox"></div>
			<div class="classic">
				<swiper
					:modules="modules"
					:slides-per-view="1"
					:space-between="50"
					:pagination="{ clickable: true }"
					:scrollbar="{ draggable: true }"
					@swiper="onSwiper"
					@slideChange="onSlideChange"
					autoplay
					loop
				>
					<swiper-slide v-for="(swiper,index) in slideList" :key="index">
						<div class="classic-list">
							<div class="classic-item" v-for="(item, i) in swiper" :key="i">
								<div class="color" :style="{ backgroundColor: colors[index * 4 + i] }"></div>
								<div class="infos">
									<div class="num">{{item.val4}}</div>
									<div class="des">{{item.val2}}</div>
								</div>
							</div>
						</div>
					</swiper-slide>
				</swiper>
			</div>
		</div>
	</div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, watch } from "vue";

import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Scrollbar, A11y, Virtual, Autoplay } from "swiper";
import "swiper/scss";
import "swiper/scss/pagination";
import "swiper/scss/scrollbar";

const modules = $ref([Pagination, A11y, Autoplay]);
const activeIndex = $ref(0); //当前滑动索引
const colors = $ref(["#30B7FF", "#FEFF4C", "#00B366", "#FB4E81", '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#5FCEF0', '#FAC858', '#A26AFF']);
const onSwiper = (swiper) => {
	activeIndex = swiper.activeIndex;
};
const onSlideChange = (i) => {
	// console.log("slide change", i.activeIndex);
	activeIndex = i.activeIndex;
};

let eCharts = null;
let dutyBox = $ref(null);

const props = defineProps(["list"]);
const pieData = $ref([]);
const slideList = $ref([]);
const total = $ref(0)

watch(
	() => props.list,
	(newV) => {
		console.log(props.list)
		let arr = [];
		pieData = []
		slideList = []
		pieData = newV.map((it, i) => {
			let obj = {};
			obj.value = it.val3;
			obj.name = it.val2;

			arr.push(it);
			if (arr.length >= 4 || newV.length == i + 1) {
				slideList.push(arr);
				arr = [];
			}

			return obj;
		});

		if(eCharts) {
			eCharts.clear()
			init('refresh')
		}else{
			init()
		}
	}
);

onMounted(() => {
	init();
});

const init = (type) => {
	// 总数
	total = 269
	// pieData.map(item => {
	// 	total += Number(item.value)
	// })

	let option = {
		title: [
			{
				text: `{val|${total}人}\n{name|总人数}`,
				top: "center",
				left: "50%",
				textAlign: "center",
				textStyle: {
					rich: {
						name: {
							fontSize: 14,
							fontWeight: "normal",
							color: "#fff",
						},
						val: {
							fontSize: 24,
							fontWeight: "bold",
							color: "#77FFFF",
							padding: [10, 0, 5, 0],
						},
					},
				},
			},
		],
		tooltip: {
			show: false,
		},
		legend: {
			show: false,
			top: "center",
			right: "5%",
			orient: "",
			textStyle: {
				color: "#ffffff",
			},
			borderRadius: 50,
			formatter: function (item, val) {
				return `20-29岁：27% 1478人`;
			},
		},
		color: colors,
		series: [
			{
				name: "Access From",
				type: "pie",
				radius: ["50%", "70%"],
				center: ["50%", "50%"],
				// avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: "#fff",
					borderWidth: 2,
					normal: {
						label: {
							show: false,
						},
						labelLine: {
							show: false,
						},
					},
				},
				// emphasis: {
				// 	label: {
				// 		show: true,
				// 		fontSize: "40",
				// 		fontWeight: "bold",
				// 	},
				// },
				labelLine: {
					show: false,
				},
				data: pieData,
			},
		],
	};

	if(!type) eCharts = echarts.init(dutyBox);
	eCharts.setOption(option);
};
</script>

<style scoped lang="scss">
@import "../../assets/css/common.scss";
.duty-box {
	height: 233px;
	.red {
		width: 187px;
		height: 30px;
		margin-left: 10px;
		.image {
			width: 100%;
			height: 100%;
		}
	}
	.ratio-box {
		width: 206px;
		height: 186px;
		display: flex;
		align-items: center;
		.pie {
			flex: 0 0 200px;
			width: 200px;
			height: 190px;
		}
		.classic {
			width: 240px;
			height: 190px;
			padding: 10px 0;
			.classic-list {
				display: flex;
				flex-wrap: wrap;
				.classic-item {
					flex: 0 0 49%;
					display: flex;
					margin: 14px 0;
					height: 49px;
					.color {
						margin-right: 10px;
						width: 7px;
						height: 49px;
					}
					.infos {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.num {
							font-size: 24px;
							color: $main-color;
						}
					}
				}
			}
		}
	}
}
</style>
